<template>

    <div>

        <div class="dw-table-form" style="padding-left: 60px;">

            <el-form :inline="true"  class="dw-form-inline" size="medium" style="margin-right: 50px" >
                <!--按照标题查询-->
                <el-form-item label="">
                    <el-input
                            v-model="name"
                            placeholder="输入模糊查询条件"
                            @keyup.enter.native="queryList"
                    ></el-input> <!--加入了enter按钮调用方法-->
                </el-form-item>

                <el-form-item>

                    <el-button  type="primary" @click="loadPost">
                        <el-icon style="vertical-align: middle;">
                            <search />
                        </el-icon>
                        <Span>查询</Span>
                    </el-button>

                    <el-button @click="resetParam">重置</el-button>

                    <el-button type="primary" @click="addUser">
                        <el-icon style="vertical-align: middle;">
                            <Plus/>
                        </el-icon>
                        <Span>新增用户</Span>
                    </el-button>

                    <el-button   @click="this.dialogVisible2=true" style="margin-right: 30px">
                        <el-icon style="vertical-align: middle;">
                            <Plus/>
                        </el-icon>
                        <Span>创建群组</Span>
                    </el-button>

                </el-form-item>
            </el-form>
        </div>


        <!--表格 —— 表头部分-->

      <div class="dw-table-title">
        <el-row :span="24" type="flex" justify="space-between" align="middle">
          <el-col :span="4"><h3>我的用户</h3></el-col>
          <el-col :span="18" style="text-align: right;"> <el-button icon="Delete" @click="dialogVisible=true">回收站</el-button>
          </el-col>
          <el-col :span="2"></el-col>
        </el-row>
      </div>
        <!--用户信息展示表格-->
        <el-table :data="tableData"
                  stripe
                  border
                  style="width: 100%;"
                  ref="multipleTableRef"
                  @selection-change="handleSelectionChange">

            <el-table-column type="selection" width="55" />
            <!--<el-table-column prop="id" label="Id" width="140" />--> <!--不显示id-->
            <el-table-column prop="username" label="用户名" />
            <el-table-column prop="email" label="电子邮箱" />
            <el-table-column prop="phone" label="电话号码" />
            <el-table-column prop="sex" label="性别" />
            <el-table-column prop="fee" label="费用" />
            <el-table-column prop="province" label="所在省份" />

            <el-table-column  label="操作">
                <template #default="scope"  slot-scope="scope"> <!--通过 scope 实现一行数据的传入-->
                        <el-button-group class="ml-2">
                            <el-tooltip class="item" effect="dark" content="编辑信息" placement="top-start">
                                <el-button type="primary" @click="mod(scope.row)">
                                    <el-icon style="vertical-align: middle;">
                                        <Edit />
                                    </el-icon>
                                </el-button>
                            </el-tooltip>
                            <el-popconfirm title="确定要删除嘛？" @confirm="del(scope.row.id)" style="margin-right: 5px"> <!--确认删除按钮-->
                                <template #reference  slot-scope="scope">
                                    <el-button type="primary">
                                        <el-icon style="vertical-align: middle;">
                                            <Delete />
                                        </el-icon>
                                    </el-button>
                                </template>
                            </el-popconfirm>
                        </el-button-group>
                    </template>
            </el-table-column>

        </el-table>

        <!--分页模块-->
        <div class="demo-pagination-block" style="margin-top: 10px; float: right;">
            <el-pagination
                    v-model:currentPage="pageNum"
                    v-model:page-size="pageSize"
                    :page-sizes="[5, 10, 15, 20]"
                    :small="small"
                    :disabled="disabled"
                    :background="background"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
            />
        </div>

        <!--新增用户对话框-->
        <el-dialog
                v-model="dialogVisible"
                title="用户信息"
                width="30%"
                :before-close="handleClose"
        >

            <el-form :model="form" label-width="120px">
                <el-form-item label="用户id">
                    <el-input v-model="form.id" />
                </el-form-item>
                <el-form-item label="用户姓名">
                    <el-input v-model="form.username" />
                </el-form-item>
                <el-form-item label="费用">
                    <el-input v-model="form.fee" />
                </el-form-item>
                <el-form-item label="电话">
                    <el-input v-model="form.phone" />
                </el-form-item>
                <el-form-item label="邮箱">
                    <el-input v-model="form.email" />
                </el-form-item>
                <el-form-item label="所在省份">
                    <el-input v-model="form.province" />
                </el-form-item>
                <el-form-item label="性别">
                    <el-input v-model="form.sex" />
                </el-form-item>
            </el-form>

            <template #footer>

                  <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="save">
                      提交
                    </el-button>
                  </span>

            </template>
        </el-dialog>

        <!--新增群组对话框-->
        <el-dialog
                v-model="dialogVisible2"
                title="请输入群组信息"
                width="30%"
                :before-close="handleClose2"
        >

            <el-form :model="formGroup" label-width="120px">
                <el-form-item label="群组名">
                    <el-input v-model="formGroup.groupName" />
                </el-form-item>
                <el-form-item label="群组描述">
                    <el-input
                            v-model="formGroup.groupInfo"
                            :rows="2"
                            type="textarea"
                            placeholder="请输入群组描述"
                    />
                </el-form-item>
            </el-form>

            <template #footer>

          <span class="dialog-footer">
            <el-button @click="dialogVisible2 = false">取消</el-button>
            <el-button type="primary" @click="addGroup">
              提交
            </el-button>
          </span>
            </template>
        </el-dialog>

    </div>


</template>

<script>

    import { Search } from '@element-plus/icons-vue'



    export default {
        name: "UserManage",
        data(){
            return{
                tenantId: 0, // 当前登录的租户的 id
                tableData:[], // 表格中数据,
                multipleSelectTable: [], // 选中的数据
                groupId: 0, // 当前要创建的群组 id
                pageSize: 5,
                pageNum: 1,
                total: 0,
                name: '',
                dialogVisible: false,
                dialogVisible2: false,
                form: {
                    id:'',
                    username: '',
                    sex: '',
                    phone: '',
                    email:'',
                    permission: 1,
                    lastLogin: '',
                    province: '',
                    fee: ''
                },
                formGroup: {
                    groupId: '',
                    groupName : '',
                    ownerId: '',
                    groupInfo: ''
                }
            }
        },

        methods: {

            loadGet(){
                this.$axios.get("/user/list").then(res=>{
                    if(res.code == 200){
                        console.log(res.data)
                        this.tableData = res.data;

                    } else{
                        alert('获取数据失败')
                    }
                })
            },
            loadPost(){
                console.log("租户id为" + this.tenantId)
                this.$axios.post("/user/listPageUser", {
                    pageSize : this.pageSize,
                    pageNum : this.pageNum, // 传递分页参数
                    param:{
                        name: this.name,
                        tenantId: this.tenantId // 得到用户的静态数据
                    }
                }).then(res=>res.data).then(res=>{
                    if(res.code == 200){
                        console.log(res.data)
                        this.tableData = res.data.records;
                        this.total = res.data.total;
                    } else{
                        alert('获取数据失败')
                    }
                })
            },
            handleSizeChange(val){ // 得到 PageSize 的方法
                //console.log(`${val} items per page`)
                this.pageNum = 1;
                this.pageSize = val;
                this.loadPost();
            },
            handleCurrentChange (val){ // 得到当前页的方法
                console.log(`current page: ${val}`)
                this.pageNum = val;
                this.loadPost();
            },
            resetParam(){
                this.name = '';
                this.loadPost();
            },
            addUser(){ // 弹出新增模态窗口
                this.dialogVisible = true
            },
            doMod(){
                this.$axios.post("/user/update", this.form
                ).then(res=>res.data).then(res=>{
                    if(res.code == 200){
                        this.dialogVisible = false;
                        this.loadPost()
                        this.resetParam()
                    }
                })
            },
            save(){ // 新增用户方法

                    this.$axios.post("/user/save", this.form
                    ).then(res=>res.data).then(res=>{
                        if(res.code == 200){
                            this.dialogVisible = false;
                            this.loadPost()
                            this.resetParam()
                        }
                    })
                //this.form = []
            },
            del(id){ // 删除方法
                console.log(id);
                if(this.form.id == null || this.form.id == ''){
                    this.$axios.get("/user/delete?id=" + id).then(res=>res.data).then(res=>{
                        if(res.code == 200){
                            this.dialogVisible = false;
                            this.loadPost()
                            this.resetParam()
                        }
                    })
                } else {
                    this.doMod()
                }
            },
            mod(row){ // 修改方法
                console.log(row)
                // 赋值到表单
                this.form.id = row.id;
                this.form.username = row.username;
                this.form.email = row.email;
                this.form.phone = row.phone;
                this.form.sex = row.sex;
                this.form.fee = row.fee;
                this.form.province = row.province
                this.dialogVisible = true;
            },
            setTenantId(){
                this.tenantId = this.$store.getters.getUser.data.id
            },
            handleSelectionChange(val) { // 更新选中值
                // 存储群组中每条记录
                this.multipleSelectTable = val;
            },
            addGroup(){ // 新增群组
                // 弹出新增群组窗口 —— 加入改群组
                this.dialogVisible2 = true;
                if(this.formGroup.id == null || this.formGroup.id == ''){
                    this.formGroup.ownerId = this.tenantId
                    this.$axios.post("/group/save", this.formGroup
                    ).then(res=>res.data).then(res=>{
                        if(res.code == 200){
                            this.dialogVisible = false;
                            console.log("返回值为" + res.data); // 接收后端返回的 groupId
                            this.groupId = res.data
                            this.addGroupLog()
                        }
                    })

                }
            },
            addGroupLog(){
                console.log("groupId ==" + this.groupId)
                // 存储群组中每条记录
                let returnUsers = "";
                let temp = Array.from(this.multipleSelectTable)
                console.log(temp)
                // 得到要加入当前群组的用户的 id ，所有的 id 以逗号分割转换为 String ， 加上当前租户 id 一起返回
                temp.forEach( function(item) {
                    returnUsers += (item.id  + ",");
                })
                let usersId = returnUsers.substr(0, returnUsers.length-1)
                console.log(usersId) // 测试，输出返回的 id String
                this.$axios.post("/group-log/save",
                    {
                        tenantId: this.tenantId,
                        usersId: usersId,
                        groupId: this.groupId
                    }
                ).then(res=>res.data).then(res=>{ // 和后端建立连接
                    if(res.code == 200){
                        console.log("建立成功")
                    }
                })
                this.dialogVisible2 = false // 关闭新增窗口
                this.formGroup = []
                this.$refs.multipleTableRef.clearSelection();
            }

        },
        beforeMount() {
            this.setTenantId()
            this.loadPost();
        },
    }
</script>

<style scoped>
    .demo-pagination-block + .demo-pagination-block {
        margin-top: 10px;
    }
    .demo-pagination-block .demonstration {
        margin-bottom: 16px;
    }

    .dialog-footer button:first-child {
        margin-right: 10px;
    }
    .dw-table-form{
        background-color: white;
        padding: 20px;
        margin-bottom: 20px;
    }
</style>